<template>
	<view class="col3">
		<template v-for="(vo,keys) in list">
			
			<!-- id: "Njo2acM3myVLKNL%2FM8pAMg%3D%3D"
			image: "/uploads/20250630/fbe0d6a50dfe44e521a7beb47a57ae60.png"
			info: "商品简介"
			point: "50.00"
			price: "0.50"
			stock: 100
			title: "白菜" -->
			<view class="xilu_list_item" @tap="courseDetail(vo.id)">
				<image :src="vo.xilufitness_urls.image" mode="aspectFill"
					class="xilu_list_item_cover">
				</image>
				<view class="pt10 plr20" style="margin-top:20rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<view class="m-ellipsis fs30 fw500 col3 lh42">{{vo.title || ''}}</view>
					<view class="m-ellipsis fs24 fw500 col2 lh42"></view>
					<view class="m-ellipsis fs24 fw500 col2 lh42"></view>

					<!-- <view class="mt10 fs30 col2 lh32" style="color: #e74c3c;display: flex; justify-content: space-between;">
						<view>¥{{ vo.price || 0}} </view>
						
					</view> -->
					<view class="mt10 fs30 col2 lh32" style="display: flex; justify-content: space-between;margin:20rpx 0">
						<view>￥{{ vo.price || 0}} </view>
						
					</view>
					<view class="btn-container">
					  <text class="btn-text">立即兑礼</text>
					  <view class="btn-divider"></view>
					  <text class="btn-plus">+</text>
					</view>
				</view>
			</view>
		</template>


	</view>
</template>

<script>
	export default {
		name: "mall-list",
		data() {
			return {
				lists: ['','','']
			};
		},
		props: {
			list: [Array]
		},
		methods: {
			//课程详情
			courseDetail(id, is_type) {
				this.$api.navigate('../../pages/points_mall/details/details?id=' + id + '&is_type=' + is_type)
			}
		},
		mounted() {
			console.log(this.list);
			if(this.list.shop) {
				this.lists = this.list.map((item, index) => {
					return ((item.shop.distance) / 1000).toFixed(1) + 'km'
				
				})
				console.log(this.lists);
				// this.list.shop.distance = this.list.shop.distance.toFixed(1) / 1000
				console.log(this.list);
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.btn-container {
	  background: #FFCF00;
	  	  color: #FF6105;
	  	  display: flex;
	  	  align-items: center;
	  	  justify-content: center;
	  	  width: 100%;
	  	  height: 60rpx;
	  	  border-radius: 8rpx;
	  	  font-size: 25rpx;
	  	  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	  	  margin: 0rpx auto;
	  	  box-sizing: border-box;
	  color: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 60rpx;
	  border-radius: 8rpx;
	  font-size: 25rpx;
	  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	  margin: 0rpx auto;
	  box-sizing: border-box;
	}
	
	.btn-text {
	  padding: 0 20rpx;
	  letter-spacing: 4rpx;
	}
	
	.btn-divider {
	  width: 2rpx;
	  height: 48rpx;
	  background: #fff;
	  opacity: 0.4;
	}
	
	.btn-plus {
	  padding: 0 44rpx;
	  font-size: 40rpx;
	  font-weight: 300;
	  line-height: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.xilu {
		&_list_item:nth-of-type(2n) {
			margin-right: 0;
		}

		&_list_item {
			width: 340rpx;
			padding-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;

			&_cover {
				width: 100%;
				height: 340rpx;
				display: block;
			}
		}

		&_box1 {
			width: 700rpx;
			background: #404243;
			border-radius: 20rpx;
			padding: 0 20rpx;

			&_item {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

			}

			&_item+&_item {
				border-top: 1px solid #666;
			}

			&_cover {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				display: block;
			}
		}
	}
</style>